<template>
	<view>
		<view :class="['popup-mask', { 'popup-close': !isVisible }]" @click="handleMask"></view>
		<view :style="positionStyle" :class="['popup', { 'popup-open': isVisible }]">
			<slot></slot>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		isVisible: {
			type: Boolean,
			default: false
		},
		position: {
			type: String,
			default: 'bottom'
		},
		width: {
			type: String,
			default: '100%'
		},
		borderRadius: {
			type: String,
			default: ''
		}
	},
	computed: {
		positionStyle() {
			switch (this.position) {
				case 'center':
					return `top:25%;transform: translateY(150%);width:${this.width};border-radius:${this.borderRadius};`;
					break;
				case 'top':
					return 'top:0;transform: translate(-50%,-100%);';
					break;
			}
		}
	},
	data() {
		return {};
	},
	methods: {
		handleMask() {
			this.$emit('update:isVisible', false);
		}
	}
};
</script>

<style lang="scss">
.popup-mask {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9;
	background-color: rgba(0, 0, 0, 0.3);
	transition: all 0.3s;
}
.popup-close {
	z-index: -1;
	background-color: rgba(0, 0, 0, 0);
}
.popup {
	position: fixed;
	bottom: 0;
	left: 50%;
	width: 100%;
	height: 50%;
	background-color: #ffffff;
	z-index: 1001;
	opacity: 0;
	transform: translate(-50%, 100%);
	transition: all 0.3s;
	border-radius: 15rpx 15rpx 0rpx 0rpx;
	overflow-y: auto;
}
.popup-open {
	opacity: 1;
	transform: translate(-50%, 0) !important;
}
</style>
